<template>
  <div class="app-container">
    <div class="content-box">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item title="操作提示" name="1">
          <ul>
            <li>
              当退单审核通过后，客户将会看到您选择的退货收货地址，最多可创建20条
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
      <el-button type="primary" @click="add_open">新增地址</el-button>
      <el-table
        v-loading="loading"
        :data="list"
        row-key="id"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column prop="address_id" label="ID" width="50" />
        <el-table-column prop="contacts" label="收件人" align="center" />
        <el-table-column prop="mobile" label=" 联系电话" align="center" />
        <el-table-column prop="mobile" label="所在地区" align="center">
          <template slot-scope="scope">
            {{ scope.row.province }}
            {{ scope.row.city }}
            {{ scope.row.area }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="详细地址" align="center" />
        <el-table-column prop="createtime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center" class-name="small-padding">
          <template slot-scope="scope">
            <el-col :span="1.5">
              <el-button
                type="text"
                icon="el-icon-info"
                size="mini"
                @click="edit_open(scope.row)"
                >编辑</el-button
              >
            </el-col>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="deletnew(scope.row.address_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="totalSize > 0"
        :total="totalSize"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="get_List"
      />
      <!--地址 -->
      <el-dialog
        :title="is_add ? '新增' : '编辑'"
        :visible.sync="open"
        width="600px"
        append-to-body
      >
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="收件人" prop="name">
                <el-input v-model="form.contacts" placeholder="请输入收件人" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="name">
                <el-input v-model="form.mobile" type="tel" placeholder="请输入联系电话" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所在地区" prop="name">
                <el-cascader :options="areaData" v-model="form.city_list" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详细地址" prop="name">
                <el-input v-model="form.address" placeholder="请输入详细地址" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="is_add ? add_addresss() : edit_address()"
            >确 定</el-button
          >
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import pagination from "@/components/Pagination";
import { getlist, add_new, delet_new, edit_new } from "@/api/returnAddress";
import { areaData } from "@/utils/area.js";

export default {
  components: {
    pagination,
  },
  data() {
    return {
      options: [],
      queryParams: {},
      form: {},
      list: [],
      // 遮罩层
      loading: false,
      open: false,
      title: "新增",
      totalSize: 0,
      rules: {},
      activeName: "1",
      is_add: true,
      areaData: [],
    };
  },
  created() {
    this.get_List();
    this.areaData = areaData;
  },
  methods: {
    add_open() {
      this.form = {};
      this.open = true;
      this.is_add = true;
    },
    edit_open(data) {
      this.form = { ...data };
      this.form.city_list = [data.province, data.city, data.area];
      this.open = true;
      this.is_add = false;

    },
    edit_address() {
      let info = this.form;
      info.province = this.form.city_list[0];
      info.city = this.form.city_list[1];
      info.area = this.form.city_list[2];
      delete info.city_list;
      edit_new(info).then((res) => {
        this.open = false;
        this.get_List();
        this.form = {};
      });
    },
    add_addresss() {
      let info = this.form;
      info.province = this.form.city_list[0];
      info.city = this.form.city_list[1];
      info.area = this.form.city_list[2];
      delete info.city_list;
      add_new(info).then((res) => {
        this.open = false;
        this.get_List();
        this.form = {};
      });
    },
    deletnew(id) {
      delet_new({ address_id: id }).then((res) => {
        this.$message({ message: "删除成功", type: "success" });
        this.get_List();
      });
    },
    cancel() {
      (this.open = false), (this.form = {});
    },
    submitForm() {},
    handleSelectionChange() {},
    get_List() {
      getlist().then((res) => {
        this.list = res.data.list;
        this.totalSize = res.data.total_page;
      });
    },
  },
};
</script>

<style>
</style>
